<!--
    案件审批

    参数：
        null

    方法:
        [funcName]  *必传   表单提交（ 在父级触发本组件的 formValidate 方法。表单验证通过后回传到父级处理）
        closeSpin   *必传   关闭加载动画
 -->

<template>
    <div class="contractCurrentUser">
        <Form ref="formData" :model="formData" :rules="ruleValidate" :label-width="120">
            <div class="contract-close-detial-currentUser">
                <Row>
                    <Col :xs="24" v-show="this.needReasonType">
                        <FormItem label="原因类型" prop="contractBusiness">
                            <div style="display: flex;flex-flow: row;align-items: center;">
                                <Tooltip max-width="400px" :content="formData.reasonType" v-if="!!formData.reasonType">
                                    <Select :disabled="this.Obj.processStatus==='approved'" style="width: 400px"
                                            @on-open-change="initGetCase('contractBusiness')"
                                            v-model="formData.reasonType" clearable placeholder="原因类型">
                                        <Option
                                            v-for="item in caseData.contractBusiness"
                                            :value="item.opinion"
                                            :label="item.opinion"
                                            :key="item.opinion"
                                        >{{ item.opinion }}
                                        </Option>
                                    </Select>
                                </Tooltip>
                                <div v-else>
                                    <Select style="width: 400px" @on-open-change="initGetCase('contractBusiness')"
                                            v-model="formData.reasonType" clearable placeholder="原因类型">
                                        <Option
                                            v-for="item in caseData.contractBusiness"
                                            :value="item.opinion"
                                            :label="item.opinion"
                                            :key="item.opinion"
                                        >{{ item.opinion }}
                                        </Option>
                                    </Select>
                                </div>
                                <Button :disabled="this.Obj.processStatus==='approved'" type="primary" @click="caseTypeAdd('contractBusiness')"
                                        style="margin-left: 8px">自定义
                                </Button>
                            </div>
                        </FormItem>
                    </Col>
                    <Col :xs="24">
                        <FormItem v-if="this.Obj.processStatus!=='approved'" label="审批意见" prop="approvalOpinion">
                            <div style="display: flex;flex-flow: row;align-items: center;">
                                <Tooltip max-width="400px" :content="formData.approvalOpinion"
                                         v-if="!!formData.approvalOpinion">
                                    <Select
                                        style="width: 400px"
                                        required
                                        @on-open-change="initGetCase('approvalOpinion')"
                                        v-model="formData.approvalOpinion"
                                        clearable
                                        placeholder="审批意见"
                                    >
                                        <Option
                                            v-for="(item,index) in caseData.approvalOpinion"
                                            :value="item.opinion"
                                            :label="item.opinion"
                                            :key="index"
                                        >{{ item.opinion }}
                                        </Option>
                                    </Select>
                                </Tooltip>
                                <div v-else>
                                    <Select
                                        style="width: 400px"
                                        required
                                        @on-open-change="initGetCase('approvalOpinion')"
                                        v-model="formData.approvalOpinion"
                                        clearable
                                        placeholder="审批意见"
                                    >
                                        <Option
                                            v-for="(item,index) in caseData.approvalOpinion"
                                            :value="item.opinion"
                                            :label="item.opinion"
                                            :key="index"
                                        >{{ item.opinion }}
                                        </Option>
                                    </Select>
                                </div>

                                <Button type="primary" @click="caseTypeAdd('approvalOpinion')" style="margin-left: 8px">
                                    自定义
                                </Button>
                            </div>
                        </FormItem>
                    </Col>
                    <Col :xs="24">
                        <FormItem v-if="this.Obj.processStatus!=='approved'" label="邮件通知" prop="processModes">
                            <div style="display: flex;flex-flow: row">
                                <RuiSelectPage style="width: 400px" v-model="formData.processModes" ref="processModes"
                                               multiple
                                               :getDataFn="getDataFn" @on-change="processModesChange" itemValue="userId"
                                               itemLabel="userRealName"/>

                                <Button type="primary" @click="sendEmail('processModes')" style="margin-left: 8px">发送邮件
                                </Button>
                            </div>
                        </FormItem>
                    </Col>
                    <Col :xs="24" v-show="this.needFile">
                        <FormItem v-if="this.Obj.processStatus!=='approved'" label="申请资料:" required>
                            <Button type="primary" @click="openUploadModal">申请资料</Button>
                        </FormItem>
                    </Col>
                </Row>
            </div>
        </Form>
        <UploadFileModal ref="uploadFileModal" :modal="isUploadFileModalOpen" @closeModal="closeModal"
                         :param="fileParams" :isPreview="false"/>
        <div>
            <Modal
                @on-visible-change="cancels"
                v-model="insuranceBusiness"
                :title="'自定义'+customTitle"
                :width="900"
                :closable="false"
                :mask-closable="false"
            >
                <div v-if="caseTypeList">
                    <custInfo ref="custInfo" :Obj="ObjParam" :customTitle="customTitle"/>
                </div>
            </Modal>
        </div>
    </div>
</template>
<script>
    import {getCase, pageQuerySimpleUserInfo} from "_p/basic/api/contract/common/case-type/case-type";
    import {getApprovalRecord} from "_p/basic/api/contract/common/approve-history/approve-history";
    import UploadFileModal from "_p/basic/pages/contract/common/uploadFileModal/uploadFileModal";
    import custInfo from "../case-type/case-type";
    import {verifyErrorToView} from "_p/basic/assets/contract/js/utils";
    import RuiSelectPage from "_p/basic/pages/contract/common/selectPage/RuiSelectPage"
    import {channelType} from "_p/basic/api/contract/channel-type/channel-type";

    export default {
        components: {
            UploadFileModal,
            RuiSelectPage,
            custInfo
        },
        props: {
            // caseNo, contractNo,  roleType
            Obj: {
                type: Object,
                required: true
            },
            approveType: {
                type: String,
            },
            pageType: {
                type: String,
            },
            needReasonType: {
                type: Boolean,
                required: false,
                default: true
            },
            needFile: {
                type: Boolean,
                required: false,
                default: true
            },
        },
        data() {
            return {
                isUploadFileModalOpen: false,
                fileParams: {},
                ObjParam: {},
                insuranceBusiness: false,
                caseTitle: "自定义添加",
                customTitle: '',
                caseTypeList: false,
                processModesDict: [],
                formData: {},
                caseData: {
                    contractBusiness: [],
                    approvalOpinion: []
                },
                ruleValidate: {
                    approvalOpinion: [
                        {
                            required: true,
                            message: "请选择审批意见",
                            trigger: "change"
                        }
                    ]
                }
            };
        },
        created() {
        },
        mounted() {
            this.init();
        },
        computed: {
            getDataFn: () => pageQuerySimpleUserInfo
        },
        methods: {
            init() {
                if (this.Obj.caseNo) {
                    this.getApprovalRecord();
                }
                this.initGetCase("contractBusiness");
                this.initGetCase("approvalOpinion");

            },
            initGetCase(type) {
                let self = this;
                getCase(type, this.Obj.type).then(res => {
                    if (res.code === "0000" && res.data) {
                        self.caseData[type] = res.data;
                    }
                });
            },
            getApprovalRecord() {
                getApprovalRecord(this.Obj.contractNo, this.Obj.caseNo, channelType(this.$route.meta.params)).then(res => {
                    if (res.code === "0000") {
                        this.formData.reasonType = res.data.reasonType;
                    }
                });
            },
            cancels(bool) {
                this.caseTypeList = bool;
            },
            caseTypeAdd(type) {
                console.log(this.Obj.type);
                this.ObjParam = {
                    contractBusiness: this.Obj.type,
                    caseType: type
                };
                if (type === 'contractBusiness') {
                    this.customTitle = '原因类型'
                } else if (type === 'approvalOpinion') {
                    this.customTitle = '审批意见'
                }
                // this.caseType = {caseType: type}
                this.insuranceBusiness = true;
                this.caseTypeList = true;
            },
            processModesChange(v) {
                console.log(v, 'processModesChange');
            },
            // 点击 发送邮件
            sendEmail(name) {
                let data = this.$refs[name].selectData;
                console.log('sendEmail 数据', data);
            },
            closeModal() {
                let l = this.$refs.uploadFileModal.getFileList()
                console.log('申请资料 文件长度为：', l);
                this.isUploadFileModalOpen = false;
            },
            openUploadModal() {
                this.fileParams = {
                    belongNo: this.Obj.contractNo,
                    busiNo: this.Obj.caseNo,
                    busiType: 'approveUploadFile',
                    busiData: {},
                    busiNodes: 'approveUploadFile' //业务节点
                };
                this.isUploadFileModalOpen = true;
            },
            /*
             * formData 数据验证 验证通过后 将数据传回父级处理  (保存/提交/审核 通用)
             * @param {String} funcName 回传给父级的方法 (注意父级需要传方法)
             * @param {Object} [data]   父级带来的数据
             */
            formValidate(funcName, data, type) {
                if (!funcName) return;
                console.log(this.approveType, 'approveTypeapproveTypeapproveType')
                let t = type || this.approveType;
                if (t === 'pass') {
                    let d = Object.assign({}, data, this.formData);
                    this.$emit(funcName, d);
                    return;
                }
                this.$refs.formData.validate(valid => {
                    if (valid) {
                        console.log(this.formData, "11111111")
                        let d = Object.assign({}, data, this.formData);
                        this.$emit(funcName, d);
                    } else {
                        let fields = this.$refs.formData.fields;
                        this.$emit("closeSpin");
                        this.$Message.error("必填项不能为空!");
                        verifyErrorToView(fields);
                    }
                });
            }
        }
    };
</script>
<style lang="less">
    .contract-close-detial-currentUser {
        button {
            width: 76px;
        }
    }
</style>
